import Link from "next/link"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

interface BlogPostCardProps {
  title: string
  date: string
  excerpt: string
  link: string
}

export function BlogPostCard({ title, date, excerpt, link }: BlogPostCardProps) {
  return (
    <Card className="flex flex-col overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:scale-105">
      <CardHeader className="p-4 pb-0">
        <CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-50">{title}</CardTitle>
        <p className="text-sm text-gray-500 dark:text-gray-400">{date}</p>
      </CardHeader>
      <CardContent className="flex-grow p-4">
        <p className="text-gray-700 dark:text-gray-300 text-base">{excerpt}</p>
      </CardContent>
      <CardFooter className="p-4 border-t bg-gray-50 dark:bg-gray-800">
        <Button asChild variant="link" className="p-0 h-auto text-black dark:text-white">
          <Link href={link}>Read More</Link>
        </Button>
      </CardFooter>
    </Card>
  )
}
